<template>
  <div class="body">
    <div class="main" v-show="!show">
      <Header :navList="navList"/>
      <div class="content">
        <div class="list-content">
          <div style="height: 100%;display: flex">
            <div style="width: 270px;">
              <div
                  style="height: 32px;line-height: 32px;font-size: 24px;color: #000000;display: flex;width: 270px;border-bottom: 2px solid #60A3D7;padding-bottom: 8px">
                <div style="width: 8px;height: 32px;background: #60A3D7;margin-right: 10px"></div>
                <div>{{ moreTitle }}</div>
              </div>
              <div style="padding-top: 8px">
                <div class="list" :class="{'is':active===index}" v-for="(item, index) in options"
                     @click="handleCheckList(item,index)" :key="index">{{ item.name }}
                </div>
              </div>
            </div>
            <div style="width: 930px;padding-left: 24px">
              <div style="margin: 35px 0;font-size: 28px;text-align: center">{{ title }}</div>
              <div style="text-align: center;font-size: 14px;color: #4E5969">
                <span>作者：{{ userName }}</span>
                <span style="margin: 0 48px">发布时间：{{ createDate }}</span>
              </div>
              <el-divider></el-divider>
              <div style="white-space:pre-wrap;margin-bottom: 24px" v-html="content">
              </div>
              <el-row v-if="fileList.length > 0" :gutter="24">
                <el-col :span="8" v-for="item in fileList" :key="item.attachmentId">
                  <div style="margin-bottom: 12px">
                    <el-image
                        style="width: 100%; height: 180px;"
                        :src="item.filePath"
                        :preview-src-list="filePicArr"
                    >
                    </el-image>
                  </div>
                </el-col>
              </el-row>
              <div v-else style="font-size: 14px;text-align: center;margin-top: 40px">
                暂无数据
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
    <div class="a" v-show="show"></div>
  </div>

</template>

<script>
import { getDetailApi, getList, getMoreDetailApi } from "@/api/home";

import Header from "@/templates/Layout/MoreHeader.vue";
import Footer from "@/templates/Layout/Footer.vue";
import { getBubbleSort } from "@/util/util";

export default {
  components: {
    Footer,
    Header,
  },
  data() {
    return {
      active: 0,
      fileList: [],
      navList: [],
      title: '',
      moreTitle: '',
      show: true,
      userName: '',
      moduleName: '',
      createDate: '',
      content: '',
      type: '',
      options: [],
      moreObj: {
        moduleId: '',
        code: ''
      },
      page: {
        pageNum: 1,
        pageSize: 15
      },
      filePicArr: []
    }
  },

  mounted() {
    this.getList()
    const list = localStorage.getItem('galleryList')

    if (list) {
      // console.log(JSON.parse(list))
      this.options = JSON.parse(list)
    }
  },
  methods: {
    async getList() {
      const res = await getList()
      this.navList = this.getNavBarList(res.navList, res.orgList)
      if (this.$route.query.id) {
        this.type = this.$route.query.type
        const res = await getDetailApi(this.$route.query.id, this.$route.query.type)
        this.moreObj = {
          moduleId: res.moduleId,
          code: res.code
        }
        const moreList = await getMoreDetailApi({
          moduleId: this.moreObj.moduleId,
          code: this.moreObj.code, ...this.page
        })
        if (moreList?.records) {
          // this.options = moreList.records[0].children
          this.moreTitle = moreList.records[0].moduleName
        } else {
          // this.options = moreList[0].children
          this.moreTitle = moreList[0].moduleName
          moreList[0].children.forEach((item, index) => {
            if (item.id === res.moduleId) {
              this.active = index
            }
          })
        }

        this.title = res.name
        this.content = res.content
        this.userName = res.userName
        this.moduleName = res.moduleName
        this.createDate = res.createDate

        res?.attachmentList.forEach((item) => {
          // if (item.attrType === 1) {
          this.fileList.push(item);
          // }
        });
        if (process.env.VUE_APP_ENV === 'local') {
          this.fileList.map(item => {
            item.filePath = item.filePath.replace("http://127.0.0.1:8080", "http://x15wywe2l9f7.xiaomiqiu.com")
            const name = item.fileName.split('.')
            item.picName = name[0]
            this.filePicArr.push(item.filePath)
          })
        }

        // console.log(this.fileList)
      }
      this.$nextTick(() => {
        this.show = false
      });
    },
    getNavBarList(nav, org) {
      org[0].moduleName = '工作动态'
      org[0].order = 20
      nav[0].children.push(org[0])
      // const a = getBubbleSort(nav[0].children)
      return nav[0].children.sort(getBubbleSort('order', 1))
    },
    handleDownload(path) {
      window.open(path);
    },
    // debouncedSearch: debounce(function (item) {
    //   // 执行搜索操作，例如发送网络请求或处理数据
    //   // 可以在这里调用搜索函数
    //   this.handleCheckList(item);
    // }, 300),
    async handleCheckList(item, index) {
      if (item.id) {
        const res = await getDetailApi(item.id, this.$route.query.type)
        // console.log('res', res)
        if (res) {
          this.fileList = []
          this.filePicArr = []
          res.attachmentList.forEach((item) => {
            // if (item.attrType === 1) {
            this.fileList.push(item);
            // }
          });
          if (process.env.VUE_APP_ENV === 'local') {
            this.fileList.map(item => {
              item.filePath = item.filePath.replace("http://127.0.0.1:8080", "http://x15wywe2l9f7.xiaomiqiu.com")
              const name = item.fileName.split('.')
              item.picName = name[0]
              this.filePicArr.push(item.filePath)
            })
          }
          this.title = res.name
          this.content = res.content
          this.userName = res.userName
          this.moduleName = res.moduleName
          this.createDate = res.createDate
        }
      }
      this.active = index
      // const {href} = this.$router.resolve({
      //   path: `/more`,
      //   query: {
      //     id: item.id,
      //     code: this.moreObj.code
      //   }
      // });
      // window.open(href, '_blank');
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.main {
  background: #fff;
  height: 100%;
  width: 100%;
  display: table;
}

.content {
  width: 100%;
  height: 100%;
  margin: 24px 0;
  display: flex;
  justify-content: center;
}

.list-content {
  min-height: calc(100vh - 210px - 60px - 60px - 48px);
  width: 1200px;
  background: #fff;
}

.a {
  background: #ECF1F7;
}

.list {
  height: 48px;
  width: 100%;
  font-size: 16px;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  background: #f4f4f5;
}

.list:not(:last-child) {
  border-bottom: 1px solid #cdcdcd;
}

.list:hover {
  background: #60A3D7;
  color: #fff;
}

.is {
  background: #60A3D7;
  color: #fff;
}


</style>
